<template>
    <div class="xl-form-item" :class="required?'required':''">
        <p>
            <span class="xl-label" :style="deflabelStyle()"  v-if="label" ><slot name="label"><span v-html="label"></span><i class=colon>:</i></slot></span>
            <span class="xl-form-content" :style="defcontentStyle()">
                <slot></slot>
            </span>
        </p>
    </div>
</template>

<script>

export default {
  name: 'xl-form-item',
  data() {
    return {
      form: {
      }
    }
  },
  props: {
    label: String,
    inline: {
      type: String, // h 横向，v纵向
      default: 'h'
    },
    labelWidth: {
      type: String/Number,
      default: 'auto'
    },
    required: {
      type: Boolean,
      default: undefined
    },
    labelStyle: String,
    contentStyle: String,
  },
  methods: {
    deflabelStyle() {
      let w ='';
      if (typeof this.labelWidth == 'string') {
        w = ';width:'+this.labelWidth;
      } else {
        w = ';width:'+this.labelWidth+'px';
      }
      if (this.inline==='v') {
        return this.labelStyle+'width:100%;';
      } else {
        return this.labelStyle+w;
      }

    },
    defcontentStyle() {
      return '';
      let w = '';
      if (typeof this.labelWidth == 'string') {
        w= ';margin-left:'+this.labelWidth;
      } else {
        w= ';margin-left:'+this.labelWidth+'px';
      }
      if (this.inline==='v') {
        return this.labelStyle;
      } else {
        return this.labelStyle+w;
      }
    }
  },
  computed: {

  }
}
</script>

<style scoped>

</style>
